<template>
  <div class="container">
    <van-button :disabled="countdown > 0" @click="startCountdown" class="captcha-btn">
      {{ buttonText }}
    </van-button>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'

const countdown = ref(0)
const timer = ref<number | null>(null)

const buttonText = computed(() => {
  return countdown.value > 0 ? `${countdown.value}秒后重试` : '获取验证码'
})

const startCountdown = () => {
  if (countdown.value > 0) return

  countdown.value = 60
  timer.value = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0 && timer.value) {
      clearInterval(tvimer.value)
      timer.value = null
    }
  }, 1000)
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.captcha-btn {
  width: 200px;
}
</style>
